var _Container = require('component/container.js');
var _Pane = require('scenes/widget/pane.js');
var _inherit = require('core/inherit.js');

var _vec4f = require('core/glm.js').vec4f;
var _Materials = require('global/materials.js');
var TWEEN = require('third_party/tweenjs/tween.js');

var S = require('res/style.js');

// ==========================
// Tip
// ==========================
function Tip(text) {
    _Container.call(this);
    this.addChild(this.mText = S.ui.tip.createText(text));
    this.mText.setAnchor(0.5, 0.5);

    this.mColor = new _vec4f(1, 1, 1, 1);
    this.mAlpha = new _vec4f(1, 1, 1, 1);

    this.alpha = 0;
    this.move = 0;
}
_inherit(Tip, _Container);
Tip.prototype.show = function () {
    this.move = -30;
    this.alpha = 0;
    return new TWEEN.Tween(this).to({move: 0, alpha: 1}, 0.4).onUpdate(this.onUpdate).start();
};
Tip.prototype.onUpdate = function () {
    this.mText.setPosition(this.move, 0);
};
Tip.prototype.drawContent = function (context) {
    this.mColor.scale(this.alpha, this.mAlpha);
    _Materials.globalColor(this.mAlpha);
    this.mText.draw(context);
    _Materials.globalColor(this.mColor);
};

// ==========================
// Footer
// ==========================
function Footer(size) {
    _Pane.call(this);
    this.setSize(size);
}
_inherit(Footer, _Pane);
Footer.prototype.showTip = function (text) {
    this.dumpFragments();

    var tip = new Tip(text);
    this.addFragment(tip).setPosition(0.5, 0.5);
    tip.show();
};

module.exports = Footer;